@(prova:models.Prova,form:Form[models.Prova],questaoForm:Form[models.Questao]) @main("Prova Movel") {

@header()
<style>
.conteinerform {
	margin: 1pxl;
}

#hiddenThings {
	display: none;
}
</style>

<div class="container">
	<div class="conteinerform">
	@if(form.hasGlobalErrors) {
    <p class="error">
        @form.globalError.message
    </p>
}
		@helper.form(action =
		routes.ProvaController.atualizarAction(prova.getId())){
		@helper.inputText(form("titulo"),'_label->"Titulo") <input
			type="submit" class="btn btn-success" value="Atualizar" /> }
	</div>

	@if(!prova.getQuestoes().isEmpty()){

	<table class="table table-bordered">
		<thead>

			<tr>
				<th>Título</th>
				<th>Tipo</th>
				<th>Excluir</th>
			</tr>

		</thead>
		<tbody>
			@for(questao <- prova.getQuestoes()) {

			<tr>
				<td>@questao.getTitulo()</td>
				<td>@questao.getTipo()</td>
				<td>
				@helper.form(action = routes.ProvaController.excluirQuestao(questao.getId())){
				<input type="submit" value="Excluir"/></td>		
				}
				
				</td>
			</tr>
			}
		</tbody>
	</table>
	}
	<div class="conteinerform">
		@if(questaoForm.hasGlobalErrors) {
    	<p class="error">
        @questaoForm.globalError.message
   		 </p>
	}
		@helper.form(action =
		routes.ProvaController.addQuestaoAction(prova.getId()),'class ->
		"form-inline"){ 
		
		<label for="titulo">Título:</label>
		 <textarea type="text" 	name="titulo" id="titulo" ></textarea> <br/>
		 <label for="tipo">Tipo:</label>
		  <select 	id="tipo" name="tipo">
		  	 @for(cType <- TipoQuestao.values()){
				<option value="@cType.name()">@cType.name()</option> 
			 }
			</select> 
			<br/>

		<div id="conteinerRespostaAberta">
			<label for="respostaAberta">Resposta:</label>
			<textarea type="text" name="respostaAberta" id="respostaAberta" ></textarea>
		</div>
		<div id="conteinerRespostaFechada">
		<input type = "hidden" id="count" value="0" name="count"/>
			<div id="conteinerAlternativas">
			<h5 >Alternativas</h5>
<table class="table table-bordered" id="myTable">
	<thead>

		<tr>
			<th>Correta</th>
			<th>Enunciado</th>
			<th>Excluir</th>
		</tr>

	</thead>
	<tbody>
	
	</tbody>
	</table>
			</div>
			<a id="adicionarAlternativa" href="#" class="btn btn-success">+</a>
			
		</div>
		<input type="submit" class="btn btn-success" value="Adicionar" /> 
		
		}
	</div>
	
	<div id="hiddenThings">
		<div id="altContent">
			<div>
				<input id="alt" type="text" name="alt" />
			</div>
		</div>
	</div>

</div>
<!-- /container -->
@modal()
<script>
	ProvaController = {
		mostraQuestaoporTipo : function(valor) {
			
			switch (valor) {
			case "aberta": // aberto
				$("#conteinerRespostaAberta").show();
				$("#conteinerRespostaFechada").css("display","none");
				break;
			case "fechada": // fechada
				$("#conteinerRespostaAberta").css("display","none");
				$("#conteinerRespostaFechada").show();
				break;
			}

		},
		addCampoAlternativa : function(count) {
			
			var content = "<tr>";
				
				content += "<td>";
				
				content+="<input type='radio' name='corretaIndex' value='"+count+"'/>";
				
				content += "</td>";
				
				content += "<td>";
				
				content+="<textarea  id='alt"+count+"' name='alt"+count+"' ></textarea>";
				
				content += "</td>";
				
				content += "<td>";
				
				content +="<a href='#' class='deleteBtn' >Excluir</a>";
				
				content += "</td>";
				
				content += "<tr>";
			
			$('#myTable > tbody:last').append(content);
			$("#count").val(count);
		}

	};

	$(function() {

		$("#conteinerRespostaAberta").show();
		$("#conteinerRespostaFechada").css("display","none");

		$("#tipo").change(function(){
			var value = $(this).val();
			
			ProvaController.mostraQuestaoporTipo(value);
		});

		$("#adicionarAlternativa").click(function(event) {
			 event.preventDefault();
			 var count = $("#conteinerAlternativas input").length+1;
			ProvaController.addCampoAlternativa(count);
		});
		    $(document).on("click",".deleteBtn",function() {

		        var tr = $(this).closest('tr');
		        tr.remove();
		       
		        return false;
		    });

		

	});
</script>

}
